<template>
  <div class="bar">
    <div class="right">
      <t-button theme="default" variant="outline" @click="store.init()">
        <template #icon><t-icon name="refresh" /></template>
        {{ $t('common.reset') }}
      </t-button>
    </div>
    <div class="title">
      <t-button theme="default" shape="square" style="margin-right: 10px" @click="$router.back()">
        <template #icon><t-icon name="arrow-left" /></template>
      </t-button> 
      {{ plugin.t('outbound.title') }}
    </div>
  </div>
  <div class="plugin-goods-outbound-create">
    <t-form ref="form" :data="formData" :rules="rules" label-align="top" @submit="onSubmit">
      <div class="right-box" style="padding-left: 20px">
        <t-affix ref="affix" :offset-top="20">
          <div class="bg-box" style="width: 300px">
            <div class="total">
              <div class="label">{{ plugin.t('outbound.count') }}</div>
              <div class="count">{{ formData.count }}</div>
            </div>
            <t-button theme="primary" size="large" :loading="loading" @click="form.submit()" block>{{ plugin.t('outbound.btn.submit') }}</t-button>
          </div>
        </t-affix>
      </div>

      <div class="box">
        <div class="bg-box">
          <div class="title">{{ plugin.t('outbound.tabs.0') }}</div>
          <t-row :gutter="20">
            <t-col :span="4">
              <t-form-item :label="plugin.t('outbound.client_name')" name="code">
                <div style="width: 100%">
                  <t-input-adornment>
                    <t-input v-model="formData.client_name" @click="client.open()" readonly>
                      <template #prefixIcon>
                        <t-icon name="user" style="margin-right: 8px" />
                      </template>
                    </t-input>
                    <template #append>
                      <t-button theme="default" variant="text" @click="store.client({})">
                        <template #icon>
                          <t-icon name="delete" />
                        </template>
                      </t-button>
                    </template>
                  </t-input-adornment>
                </div>
              </t-form-item>
            </t-col>
            <t-col :span="4">
              <t-form-item :label="plugin.t('outbound.code')" name="code">
                <t-input v-model="formData.code"/>
              </t-form-item>
            </t-col>
            <t-col :span="4">
              <t-form-item :label="plugin.t('outbound.name')" name="name">
                <t-input v-model="formData.name" />
              </t-form-item>
            </t-col>
          </t-row>
        </div>

        <div class="bg-box">
          <div class="title">{{ plugin.t('outbound.tabs.1') }}</div>
          <Table />
          <div class="btn">
            <t-button variant="outline" @click="create.open()">
              {{ plugin.t('outbound.btn.create') }}
            </t-button>
            <t-button theme="primary" variant="outline" @click="search.open()">
              <template #icon><t-icon name="add" /></template>
              {{ plugin.t('outbound.btn.add') }}
            </t-button>
          </div>
        </div>
      </div>
    </t-form>
    <Create ref="create" @post="goods => store.add(goods)" />
    <Search ref="search" :price="true" @post="goods => store.add(goods)" />
    <Client ref="client" @post="row => store.client(row)" />
  </div>
</template>
<script setup>
  import { ref } from 'vue'
  import app from '@/app'
  import index from '../../../index'
  import store from './store'
  import Table from './table.vue'
  import Create from '@/plugin/goods/components/create.vue'
  import Search from '@/plugin/goods/components/search.vue'
  import Client from '@/plugin/client/components/search.vue'

  const plugin = index.plugin
  const create = ref(null)
  const search = ref(null)
  const client = ref(null)
  const form = ref(null)
  const formData = store.data
  const rules = {
    name: [
      { required: true, message: ' ', trigger: 'blur' }
    ],
    code: [
      { required: true, message: ' ', trigger: 'blur' }
    ]
  }

  const loading = ref(false)

  const onSubmit = ({ validateResult }) => {
    if (validateResult === true) {
      loading.value = true
      store.post().then(res => {
        app.message('success', 'message.ok')
      }).catch(err => {
        app.message('error', 'message.error.' + err.message)
      }).finally(() => {
        loading.value = false
      })
    }
  }
</script>
<style lang="scss">
  @import '@/style/global';

  .plugin-goods-outbound-create{
    overflow: hidden;
    
    .title{
      color: $color-title;
      font-size: 18px;
      font-weight: bold;
      padding-bottom: 20px;
    }

    .btn{
      padding-top: 20px;
      text-align: right;
      
      button{
        margin-left: 20px
      }
    }
    
    .total{
      padding-bottom: 30px;

      .label{
        color: $color-title;
        font-size: 14px;
        font-weight: bold;
      }

      .count{
        color: $color;
        font-size: 23px;
        margin-top: 10px;  
      }
    }
  }
</style>